好開心昨天己經做出主要內容頁，今天想來做個按鈕分頁，所以主要目標是第六塊：

第六塊的 HTML 也超級簡單，只要給個 div 其它什麼都不用，是不是很嗨桑：

<!-- 第六塊 -->
<div class="btncontent">
</div>

單欄我們也要來 CSS 一下：

.btncontent{
    display: flex;
    justify-content: center;
}
.btncontent span{
    border:1px solid;
    width:50px;
    line-height:50px;
    text-align: center;
    margin:10px;
    font-size:24px;
}
.btncontent span:hover{
    background:#757575;
    color:white;
}

JS 好複雜的，我們今天先來依內容多寡產生按鈕數量吧，按鈕我想就繼續寫在 updateTitle 的 functaion 裡面吧，當 title 變動，會去撈出 allData 的資料：

1. 首先，我們要先設一個空陣列，把所有 select 出來的資料都丟到這個陣列裡

var selectAry =[];

for (var i = 0; i < allData.length; i++) {
    if (select == allData[i].Zone) {
        selectAry.push(allData[i]);
    }
}

2. 來算出內容頁有幾顆按鈕吧

var page = document.querySelector('.btncontent');
var btnNum = Math.ceil(selectAry.length / 6);

3. 算出幾顆按鈕後，我們要把它帶到字串裡面：

var pageStr = '';

for (var i = 0; i < btnNum; i++) {
    pageStr += `<span>${i + 1}</span>`;
}
page.innerHTML = pageStr;

好的，突然發現自己要去修其他東西，今天就先到這裡了(溜～